<template>
	<view class="dynamic_bottom">
		<view class="dynamic_bottom_content">
			<view @click="commentEvent" class="comment-btn">
				<label style="margin-left: 20rpx;height: 76rpx;line-height: 76rpx;text-align: center;font-size: 28rpx;color: #B0B0B0;">说点什么…</label>
			</view>
			<view class="menu_view">
				<view @click="thumbsEevent" class="menu_item">
					<image v-if="mainData.thumbsStatus == 0" class="menu_item_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"></image>
					<image v-if="mainData.thumbsStatus == 1" class="menu_item_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good_sel.png"></image>
					<label class="menu_item_label">{{ mainData.thumbs }}</label>
				</view>
				<view @click="collectionsEvent" class="menu_item">
					<image v-if="mainData.collectStatus == 0" class="menu_item_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_fav.png"></image>
					<image v-if="mainData.collectStatus == 1" class="menu_item_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/fav_sel.png"></image>
					<label class="menu_item_label">{{ mainData.collections }}</label>
				</view>
				<view class="menu_item">
					<image class="menu_item_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_comment.png"></image>
					<label class="menu_item_label">{{ mainData.comments }}</label>
				</view>
				<view class="menu_item">
					<image class="menu_item_img" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_share.png"></image>
					<label class="menu_item_label">分享</label>
					<button class="wxBtn" open-type="share"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"dynamic-bottom-view",
		data() {
			return {

			};
		},
		props: {
			mainData: {
				type: Object,
				default: ()=>{}
			}
		},
		methods: {
			commentEvent() {
				this.$emit('writecomment')
			},
			thumbsEevent() {
				this.$emit('thumb')
			},
			collectionsEvent() {
				this.$emit('collection')
			}
		}
	}
</script>

<style scoped>
	.dynamic_bottom {
		height: calc(108rpx + env(safe-area-inset-bottom));
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 999;
		width: 100%;
	}
	.dynamic_bottom_content {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 108rpx;
		margin-top: 0;
		width: 100%;
		margin-left: 0;
	}
	.comment-btn {
		margin-left: 30rpx;
		background-color: #F5F5F5;
		height: 76rpx;
		border-radius: 26rpx;
		width: 314rpx;
	}
	.menu_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-left: 40rpx;
		margin-right: 30rpx;
		width: calc(100% - 414rpx);
	}
	.menu_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.menu_item_img {
		width: 48rpx;
		height: 48rpx;
	}
	.menu_item_label {
		font-size: 20rpx;
		line-height: 24rpx;
		text-align: center;
		color: #666666;
	}
	.wxBtn {
		  background-color: transparent;
		  width: 48rpx;
		  height: 60rpx;
		  flex: 1;
		  top: 0;
		  left: 0;
		  right: 0;
		  position: absolute;
		  z-index: 200;
	}
	button::after {
		  border: none;
	}
</style>
